<template>
    <div>
      <detail-banner
        :showBack="showBack"
        :bannerImg="bannerImg"
        :sightName="sightName"
        :gallaryImgs="gallaryImgs"
      ></detail-banner>
      <detail-header :showHeader="showHeader" :headerOpacity="headerOpacity"></detail-header>
      <detail-desc :position="position"></detail-desc>
      <detail-recommend ></detail-recommend>
      <detail-list :list="categoryList"></detail-list>
    </div>
</template>

<script>
  import detailBanner from './components/detailBanner'
  import detailHeader from './components/detailHeader'
  import detailList from './components/detailList'
  import detailDesc from './components/detailDesc'
  import detailRecommend from './components/detailRecommend'
  import axios from 'axios'
  export default {
    name: "detail",
    data(){
      return {
        showBack : true,
        showHeader : false,
        headerOpacity :{
          opacity:0
        },
        bannerImg : '',
        categoryList :[],
        sightName :'',
        gallaryImgs:[],
        id:'',
        position:''
      }
    },
    components:{
      detailBanner,
      detailHeader,
      detailList,
      detailDesc,
      detailRecommend
    },
    methods :{
      handleScroll(){
        const top = document.documentElement.scrollTop;
        if( top> 1) {
          this.showBack = false;
          this.showHeader = true;
          let opacity = top/100;
          opacity = opacity > 1?1:opacity;
          this.headerOpacity = {
            opacity
          }
        }else {
          this.showBack = true;
          this.showHeader = false
        }
      },
      getDetailInfo(){
        axios.get('/api/detail.json',{
          params:{
            id:this.$route.params.id
          }
        })
          .then(this.getDetailInfoSucc)
      },
      getDetailInfoSucc(res){
        let id = this.$route.params.id;
        res = res.data;
        if(res.ret&&res.data){
          let data=res.data[id];
          this.bannerImg = data.bannerImg;
          this.categoryList = data.categoryList;
          this.sightName = data.sightName;
          this.gallaryImgs = data.gallaryImgs
          this.position = data.position
        }
      }
    },
    activated () {
      this.getDetailInfo();
      window.addEventListener('scroll',this.handleScroll)
    },
    deactivated (){
      window.removeEventListener('scroll',this.handleScroll)
    }
  }
</script>

<style lang="stylus" scoped>
  .content
    height:50rem
</style>
